<template>
    <div class="map-location"
         :id="sKey"></div>
</template>

<script>
    const aCenterLatLng = [31.32, 119.79];//默认的地图中心点

    export default {
        props: {
            type: { //地图类型 add-新增 edit-修改 view-查看，不响应 props 变化
                type: String,
                default: 'add'
            }
        },
        data() {
            this.oMapApi = null;//地图api
            this.oMarker = null;//定位标记
            this.timerSetDelay = null;
            return {
                sKey: this.$WIV.fGenerateGuid({
                    key: 'map-location'
                })
            }
        },
        mounted() {
            this.fInit();//初始化地图
        },
        beforeDestroy() {
            this.oMapApi.remove();//销毁地图并清除所有相关的事件侦听器
            clearTimeout(this.timerSetDelay);
        },
        methods: {
            //接口：设置标记点位置
            fSetLocation(nLng, nLat) {
                if (!this.oMapApi) {
                    //打点时，若地图还未完成初始化，则延迟执行
                    this.timerSetDelay = setTimeout(() => {
                        this.fSetLocation(nLng, nLat);
                    }, 200);
                    return;
                }

                this.fSetMarker([nLat, nLng]);
            },
            //地图初始化
            fInit() {
                //定义 CRS4490, 卫星影像用到
                proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs');
                const CRS4490 = new L.Proj.CRS('EPSG:4490', {
                    origin: [aCenterLatLng[1], aCenterLatLng[0]],
                    bounds: L.bounds([119.09, 30.93], [120.44, 31.8])
                });

                this.oMapApi = new L.map(this.sKey, {
                    crs: CRS4490,
                    maxZoom: 18, //最大级别 1-18 (由瓦片服务决定)
                    minZoom: 1, //最小级别
                    zoomControl: false, //不显示默认的缩放按钮 (左上角)
                    attributionControl: false, //不显示默认的版权信息 (右下角)
                })
                    .setView(aCenterLatLng, 3);

                new L.supermap.TiledMapLayer('http://2.19.247.3:8090/iserver/services/map-YX/rest/maps/YX_light_map',
                    {
                        prjCoordSy: { 'epsgCode': 3857 }
                    })
                    .addTo(this.oMapApi);

                this.fInitPlugin();//初始化插件
            },
            //标点 aLatLng = [nLat, nLng]
            fSetMarker(aLatLng) {
                if (this.oMarker) {
                    this.oMarker.setLatLng(aLatLng);
                }
                else {
                    this.oMarker = L.marker(aLatLng)
                        .addTo(this.oMapApi);
                }
                this.oMapApi.panTo(aLatLng);//将地图平移打点位置
            },
            //初始化插件
            fInitPlugin() {
                if (this.type === 'add') {
                    //获取定位信息
                    //this.oMapApi.locate({
                    //    setView: true,
                    //    maxZoom: 16
                    //})
                    //    .on('locationfound', function (e) {
                    //        console.log('locationfound', e.latlng);
                    //    })
                    //    .on('locationerror', function (e) {
                    //        console.log('locationerror', e)
                    //    });
                }
                if (this.type !== 'view') {//add、edit
                    //添加地图点击事件, 标记点移动到点击处
                    this.oMapApi.on('click', (e) => {
                        this.fSetMarker(e.latlng);
                        this.$emit('location-change', {
                            lng: e.latlng.lng,
                            lat: e.latlng.lat
                        })
                    });
                }
            }
        }
    }
</script>

<style lang="less" rel="stylesheet" scoped>
    .map-location {
        width: 100%;
        height: 100%;
    }
</style>